<template>
  <!-- 点之间路径查询 -->
  <a-popover
    placement="rightTop"
    trigger="click"
    :visible="show"
    @visibleChange="visibleChange"
  >
    <!-- 搜索框内容 -->
    <div slot="content" class="popover-content">
      <div class="item-title first-title">选择节点</div>
      <div class="selected-node">
        <template v-if="selectNodesInfo.length === 2">
          <div
            v-for="(node, index) in selectNodesInfo"
            :key="index"
            class="node-itme"
          >
            <span
              class="node-color"
              :style="{ 'background-color': node._cfg.model.style.fill }"
            ></span>
            <span class="node-name">{{ node._cfg.model.label }}</span>
          </div>
        </template>
        <div
          v-if="selectNodesInfo.length !== 2 && queryMode === 1"
          class="empty-node"
        >
          --请先选择2个节点--
        </div>
      </div>
      <div class="item-title">配置项</div>
      <a-radio-group
        v-model="searchPathPattern"
        @change="searchPathPatternChange"
      >
        <a-radio class="radio-buttons" :value="1">
          搜索最短路径
        </a-radio>
        <a-radio class="radio-buttons" :value="2" disabled>
          搜索全部路径
        </a-radio>
      </a-radio-group>
      <div class="item-title">最大步长</div>
      <a-input-number
        v-model="searchPathStepLength"
        :min="0"
        :precision="0"
        size="small"
      ></a-input-number>
      <div class="search-path-btn">
        <a-button class="set-btn" size="small" @click="cancel">取消</a-button>
        <a-button class="set-btn" type="primary" size="small" @click="confirm"
          >确定</a-button
        >
      </div>
    </div>
    <!-- icon -->
    <a-tooltip placement="left">
      <span slot="title">{{ modeList[queryMode].tooltip }}</span>
      <span class="graph-content-btn" :class="{ 'icon-active': show }">
        <a-icon-font
          :class="{ active: show }"
          :type="modeList[queryMode].icon"
        />
      </span>
    </a-tooltip>
  </a-popover>
</template>

<script lang="ts">
/**
 * 点之间的路径查询 两点 / 多点  气泡卡片
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({})
export default class SearchPathPopover extends Vue {
  @Prop({ type: Array, default: () => [] }) selectNodesInfo!: any[] // 选择的节点
  @Prop({ type: Boolean, default: false }) show: boolean = false
  @Prop({ type: Number, default: 1 }) queryMode?: number // 查询模式

  private modeList: any = {
    1: { icon: 'iconliangdianzhijianbushu', tooltip: '两点之间路径查询' },
    2: { icon: 'iconduodianzhijianbushu', tooltip: '多点之间路径查询' },
  }

  // 点之间路径查询
  public searchPathPattern: any = 1 // 配置项 1-最短， 2-全部
  public searchPathStepLength: any = 2 // 最大步长
  // 切换配置项
  public searchPathPatternChange($event: any) {
    this.searchPathPattern = $event.target.value
  }
  public visibleChange(visible: boolean) {
    if (this.queryMode === 1) {
      // 延时隐藏
      if (!visible) {
        setTimeout(() => {
          this.$emit('visible-change', visible)
        }, 200)
      } else {
        this.$emit('visible-change', visible)
      }
    } else {
      this.$message.warn('暂不支持多点之间路径查询！')
    }
  }
  public cancel() {
    this.$emit('cancel')
  }
  public confirm() {
    if (typeof this.searchPathStepLength !== 'number') {
      this.$message.warning('请输入最大步长！')
      return
    }
    if (this.queryMode === 1) {
      if (this.selectNodesInfo?.length === 2) {
        this.$emit('confirm', {
          type: this.searchPathPattern,
          maxStep: Number(this.searchPathStepLength),
        })
      } else {
        this.$message.warn('请按照要求选择节点！')
      }
    }
  }
}
</script>

<style scoped lang="less">
// 两点之间路径查询
.popover-content {
  color: #5d637e;
  font-size: 12px;

  // item 标题
  .item-title {
    border-top: 1px solid #efefef;
    margin-top: 8px;
    padding: 8px 0;
  }

  .first-title {
    border-top: 1px solid transparent;
    margin-top: 0;
    padding-top: 0;
  }

  // 选择的节点
  .selected-node {
    background-color: #eff0f7;
    padding: 3px;

    .node-itme {
      align-items: center;
      display: flex;
      height: 22px;
      line-height: 22px;

      .node-color {
        border-radius: 50%;
        display: inline-block;
        height: 16px;
        margin-right: 4px;
        width: 16px;
      }

      .node-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .empty-node {
      color: rgba(34, 36, 50, 0.3);
      font-size: 12px;
      text-align: center;
    }
  }

  // 配置项单选
  .radio-buttons {
    color: #5d637e;
    display: block;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
  }

  .search-path-btn {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .set-btn {
      margin-left: 8px;
    }
  }
}

/deep/.ant-input-number {
  width: 100%;
}

.graph-content-btn {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #5d637e;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  padding: 8px;
  position: relative;

  &:hover {
    background-color: rgba(105, 115, 255, 0.1);
    border: 1px solid rgba(105, 115, 255, 0.1);
  }
}

// 功能激活，
.active {
  color: #6973ff;
}

.icon-active {
  border: 1px solid rgba(105, 115, 255, 0.1);
}
</style>
